<template>
	<view class="myQRcode">
		<navBar isBack backColor="#fff" title="分销中心" color="#fff" background="transparent"></navBar>
		<view class="qr_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		
		<!-- 头像信息 -->
		<view class="qr_head">
			<view class="qr_headImg">
				<image :src="headimg" mode=""></image>
				<view class="qr_headInfo">
					{{username}}
					<span>{{master==1?'创业主':'创业精英'}}</span>
				</view>
			</view>
			<view class="qr_headRight" @click="">
				<image src="https://manager.ryz1620.com/static/distri/saoyisao.png" mode=""></image>
			</view>
		</view>
		
		<view class="qr_QRimg">
			<view class="qr_userImg">
				<image :src="headimg" mode=""></image>
				{{username}}
			</view>
			<view class="my_QR">
				<image :src="qrImg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				qrImg:null,
				master:null,
				username:null,
				headimg:null,
			}
		},
		onLoad(options) {
			this.master = options.master,
			this.username = options.username,
			this.headimg = options.headimg,
			
			this.getQr()
		},
		methods:{
			getQr(){
				uni.showLoading({
					title:'加载中...'
				})
				let follow_id = this.$store.state.index.userId
				let path = 'pagesOne/distri/bandEntre/bindEntre';
				let params = `master=${this.master}&follow_id=${follow_id}`
				service_distri.getQrImg({path,params}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.qrImg = res.data.wx_code_url?res.data.wx_code_url:''
					}
				})
				setTimeout(function(){
					uni.hideLoading();
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myQRcode{
		.qr_topImg{width: 100%;height: 352rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 头像信息
		.qr_head{
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
			padding: 0 24rpx 0 28rpx;
			.qr_headImg{
				display: flex;
				align-items: center;
				image{width: 102rpx;height: 102rpx;border-radius: 50%;border: 4rpx solid #DBA954;}
				.qr_headInfo{
					margin-left: 24rpx;
					color: #fff;
					display: flex;
					font:500 26rpx/40rpx PingFang SC;
					flex-direction: column;
					align-items: center;
					span{
						text-align: center;
						margin-top: 10rpx;
						width: 100rpx;
						font:400 22rpx/36rpx PingFang SC;
						line-height: 36rpx;
						height: 36rpx;
						background-color: rgba(255,255,255,0.3);
						color: #fff;
						border-radius: 18rpx;
					}
				}
			}
			.qr_headRight{
				width: 48rpx;
				height: 48rpx;
				image{width: 48rpx;height: 48rpx;}
			}
		}
		
		//二维码图片
		.qr_QRimg{
			width: 588rpx;
			height: 706rpx;
			background-color: #fff;
			border-radius: 24rpx;
			margin: 212rpx auto 0;
			padding: 234rpx 88rpx 30rpx 88rpx;
			position: relative;
			.qr_userImg{
				width: 100%;
				position: absolute;
				top: -60rpx;
				z-index: 2;
				left: 0;
				font:600 34rpx/44rpx PingFang SC;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 120rpx;
					height: 120rpx;
					box-shadow: 0rpx 3rpx 6rpx rgba(219, 169, 84, 0.5);
					border: 4rpx solid #DBA954;
					border-radius: 50%;
					margin-bottom: 32rpx;
				}
			}
			.my_QR{
				image{width: 412rpx;height: 412rpx;}
			}
		}
	}
</style>
